import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    //所有的任务列表
    list:[],
    //文本框的内容
    inputValue:'新增待完成事项',
    nextId:5,
    listKey:'all'
  },
  mutations: {
    // 初始化列表
    initList(state,list){
      state.list=list.data
    },
    // 为store中的value赋值
    setInputValue(state,val){
      state.inputValue=val
    },
    // 新增列表项
    addItem(state){
      let obj={
        id:state.nextId,
        info:state.inputValue.trim(),
        done:false
      }
      state.list.push(obj)
      state.nextId++
      state.inputValue=""
    },
    // 移除列表项
    deleteItem(state,id){
      //根据id查找对应项目的索引
      const i=state.list.findIndex(x=>x.id === id)
      // 根据索引，删除对应项
      if(i!=-1){
        state.list.splice(i,1)
      }
    },
    // 修改列表选中状态
    changeStstus(state,param){
      const i=state.list.findIndex(x=>x.id === param.id)
      if(i!=-1){
        state.list[i].done=param.status
      }
    },
    // 清除已完成的任务
    clearDone(state){
      //筛选出未完成的内容赋给列表
      state.list=state.list.filter(x=>x.done===false)
    },
    changKey(state,key){
      state.listKey=key
    }

  },
  actions: {
    //获取json数据
    getList(context){
      axios.get('/list.json').then((res)=>{
        context.commit('initList',res)
      })
    }
  },
  getters:{
    // 统计未完成的任务条数
    unDoneLength(state){
      return state.list.filter(x => x.done === false).length
    },
    changList(state){
      if(state.listKey==='all'){
        return state.list
      }else if(state.listKey==='undone'){
        return state.list.filter(x=>!x.done)
      }else if(state.listKey==='done'){
        return state.list.filter(x=>x.done)
      }else{
        return state.list
      }
    }
  },
  modules: {
  }
})
